<template>
	<div class="company" v-if="showPage">
		<div class="module-header">		
			<div class="module-prompt f-left">公司列表</div>
			<!-- <el-button class="f-right" type="danger" size="small" @click="addCompany">新增公司</el-button> -->
		</div>
		<!-- <div>{{companyList}}</div> -->
		<!-- <div class="text-danger" v-if="companyList.length == 0">暂无分类，快去添加吧！</div> -->
		<div class="cate-list" v-for="(item,index) in companyList">
			<div class="cate-title">
				<el-input
				  class="input-new-tag"
				  v-if="item.showEdit"
				  v-model="item.editValue"
				  ref="saveTagInput"
				  size="small"
				  @keyup.enter.native="editCompany(item)"
				  @blur="item.showEdit = false">
				</el-input>
				<span v-else @click="item.showEdit = true">
					<el-tag
					  :key="item.name"
					  closable
					  @close="delCompany(item,index)"
					  type="danger">
					  {{item.name}}
					</el-tag>
				</span>
			</div>
		</div>
		<el-input
			:autofocus="true"
		  	class="input-new-tag"
		  	v-if="inputVisible"
		  	v-model="addValue"
		  	ref="saveTagInput"
		  size="small"
		  @keyup.enter.native="addCompany()"
		  @blur="inputVisible=false">
		</el-input>
		<el-button v-else class="button-new-tag" size="small" @click="inputVisible = true">+ New Tag</el-button>
	</div>
</template>
<script>
	import{
		userService
	}from "api"
	export default{
		data(){
			return{
				companyList: [],
				refreshList: 0,
				showPage: false,
				inputVisible: false,
				addValue: ""
			}
		},
		methods:{
			// addCompany(){
		 //        this.$prompt('请输入公司名称', '提示', {
		 //          confirmButtonText: '确定',
		 //          cancelButtonText: '取消',
		 //        }).then(({ value }) => {
			// 		userService.addCompany({name: value})
			// 		.then(res => {
			// 			this.$notify({
			// 	            message: '新增成功！',
			// 	            type: 'success'
			// 	        })
			// 	        this.refreshList++
			// 		})
		 //        })
			// },
			addCompany(){
				if(!this.addValue) return this.$notify({
		            message: '请填写公司名称！',
		            type: 'warning'
		        })
				userService.addCompany({name: this.addValue,visible: 1})
				.then(res => {
					this.$notify({
			            message: '新增成功！',
			            type: 'success'
			        })
			        this.companyList.push(res)
			        this.addValue = ""
			        // this.refreshList++
				})
			},
			getCompanyList(){
				userService.getCompanyList()
				.then(res => {
					this.showPage = true
					let companyList = res.content
					companyList.forEach(item => {
						item.showEdit = false
					})
					this.companyList = companyList
				})
			},
			editCompany(cateObj){
				cateObj.name =  cateObj.editValue
				userService.editCompany(cateObj.id,cateObj)
				.then(res => {
					this.$notify({
			            message: '修改成功！',
			            type: 'success'
			        })
			        this.refreshList++
				})
			},
			delCompany(row,index){
				this.$confirm('此操作将删除该公司, 是否继续?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        })
		        .then(() => {
					userService.delCompany(row.id)
					.then(res => {
						this.$notify({
				            message: '删除成功！',
				            type: 'success'
				        })
				        this.companyList.splice(index,1)
					})
				})
				.catch(() => {
		          this.$message({
		            type: 'info',
		            message: '已取消删除'
		          });          
		        });
			},
			cancelOpt(item,val){
				val ? inputVisible = false : item.showEdit = false
			}
		},
		mounted(){
			this.refreshList++
		},
		watch:{
			"refreshList": "getCompanyList"
		}
	}
</script>
<style scoped>
	.cate-list{
		float: left;
		margin-right: 10px;
		margin-bottom: 10px;
	}
</style>